<template>
  <div id="bigger">
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <div id="table">
      <table>
        <tr>
          <b>苹果￥10/斤，折扣8折</b>
        </tr>
        <tr>
          请输入您要购买的斤数<input type="text" @keydown.enter="buyFn" v-model.number="num" /><b>(回车也好使~)</b>
        </tr>
        <tr>
          <button  @click="buyFn" >结账买单~</button>
        </tr>
        <tr>
          结账单：总价￥{{numAll}}元 折后价￥{{numNow}}元 省了￥{{numSave}}元
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      numAll: "0",
      numNow: "0",
      numSave: "0",
    };
  },
  methods: {
    buyFn() {
      this.numAll = this.num * 10;
      this.numNow = this.num * 10 * 0.8;
      this.numSave = this.numAll - this.numNow;
    },
  },
};
</script>

<style>
#bigger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
table {
  width: 800px;
  text-align: center;
  border: 1px solid black;
  border-collapse: collapse;
}
tr {
  line-height: 35px;
  border-bottom: 1px solid black;
}
</style>